<template>
  <div class="losses-optimization-container">
    <!-- Tabs and Search -->
    <div class="header-panel">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="酸轧成材率" name="yieldRate"></el-tab-pane>
        <el-tab-pane label="成材率数据统计图" name="yieldChart"></el-tab-pane>
        <el-tab-pane label="成材率分档数据统计" name="yieldGroupStats"></el-tab-pane>
      </el-tabs>
      <div class="search-bar">
        <div class="time-selection">
          <span class="label">时间</span>
          <el-date-picker
            v-model="searchParams.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期时间"
            end-placeholder="结束日期时间"
            class="custom-date-picker"
            size="small"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <button class="btn query-btn" @click="handleSearch">查询</button>
      </div>
    </div>

    <!-- Content Area with Tables -->
    <div v-if="activeTab === 'yieldGroupStats'" class="content-panel">
      <!-- Table 1: Steel Grade Grouping -->
      <div class="table-section">
        <div class="table-header">钢种分档</div>
        <el-table :data="steelGradeData" style="width: 100%" height="100%" border size="small">
          <el-table-column prop="steelGrade" label="钢种" width="90" />
          <el-table-column prop="headLossRate" label="切头损失率[%]" align="center" />
          <el-table-column prop="tailLossRate" label="切尾损失率[%]" align="center" />
          <el-table-column prop="edgeLossRate" label="切边损失率[%]" align="center" />
        </el-table>
      </div>

      <!-- Table 2: Steel Grade Thickness Grouping -->
      <div class="table-section">
        <div class="table-header">钢种厚度分档</div>
        <el-table :data="steelGradeThicknessData" style="width: 100%" height="100%" border size="small">
          <el-table-column prop="steelGrade" label="钢种" width="90" />
          <el-table-column prop="thicknessGroup" label="厚度分档" width="110" />
          <el-table-column prop="headLossRate" label="切头损失率[%]" align="center" />
          <el-table-column prop="tailLossRate" label="切尾损失率[%]" align="center" />
          <el-table-column prop="edgeLossRate" label="切边损失率[%]" align="center" />
        </el-table>
      </div>

      <!-- Table 3: Steel Grade Thickness Width Grouping -->
      <div class="table-section">
        <div class="table-header">钢种厚度宽度分档</div>
        <el-table :data="steelGradeThicknessWidthData" style="width: 100%" height="100%" border size="small">
          <el-table-column prop="steelGrade" label="钢种" width="90" />
          <el-table-column prop="thicknessGroup" label="厚度分档" width="110" />
          <el-table-column prop="widthGroup" label="宽度分档" width="110" />
          <el-table-column prop="headLossRate" label="切头损失率[%]" align="center" />
          <el-table-column prop="tailLossRate" label="切尾损失率[%]" align="center" />
          <el-table-column prop="edgeLossRate" label="切边损失率[%]" align="center" />
        </el-table>
      </div>
    </div>
     <!-- Placeholders for other tabs -->
     <div v-else-if="activeTab === 'yieldRate'" class="content-placeholder">酸轧成材率内容待添加...</div>
     <div v-else-if="activeTab === 'yieldChart'" class="content-placeholder">成材率数据统计图内容待添加...</div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

// --- Interfaces --- 
interface SearchParams {
  dateRange: Date[];
}

interface SteelGradeLoss {
  steelGrade: string;
  headLossRate: number;
  tailLossRate: number;
  edgeLossRate: number;
}

interface SteelGradeThicknessLoss extends SteelGradeLoss {
  thicknessGroup: string;
}

interface SteelGradeThicknessWidthLoss extends SteelGradeThicknessLoss {
  widthGroup: string;
}

// --- Reactive State --- 
const activeTab = ref('yieldGroupStats'); // Default to the tab with tables
const searchParams = reactive<SearchParams>({
  dateRange: [new Date('2025-04-02 13:21:00'), new Date('2025-04-09 13:21:00')] // Default from image
});

// --- Mock Data --- 
const steelGradeData = ref<SteelGradeLoss[]>([
  { steelGrade: 'SPHC-H', headLossRate: 0.45, tailLossRate: 0.48, edgeLossRate: 0.4 },
  { steelGrade: 'SPHE-TQC', headLossRate: 0.43, tailLossRate: 0.42, edgeLossRate: 0.1 },
  { steelGrade: 'SPHE', headLossRate: 0.4, tailLossRate: 0.45, edgeLossRate: 0.68 },
  { steelGrade: 'SPHC-Y', headLossRate: 0.37, tailLossRate: 0.42, edgeLossRate: 0.4 },
  { steelGrade: 'SPHE-T', headLossRate: 0.37, tailLossRate: 0.42, edgeLossRate: 0.78 },
  { steelGrade: 'SPHE-H', headLossRate: 0.36, tailLossRate: 0.48, edgeLossRate: 0.72 },
  { steelGrade: 'SPHE-Z', headLossRate: 0.33, tailLossRate: 0.52, edgeLossRate: 0 },
  { steelGrade: 'SPHC-ZH', headLossRate: 0.33, tailLossRate: 0.24, edgeLossRate: 0.47 },
  { steelGrade: 'SPHC-WK', headLossRate: 0.31, tailLossRate: 0.44, edgeLossRate: 1.05 },
  { steelGrade: 'SPHC-LT', headLossRate: 0.31, tailLossRate: 0.39, edgeLossRate: 0.55 },
  { steelGrade: 'SPHC-BJY', headLossRate: 0.29, tailLossRate: 0.35, edgeLossRate: 0.46 },
  { steelGrade: 'SPHD', headLossRate: 0.28, tailLossRate: 0.26, edgeLossRate: 2.43 },
  { steelGrade: 'SPHC-ZQC', headLossRate: 0.28, tailLossRate: 0.4, edgeLossRate: 0.4 },
  { steelGrade: 'SPHC-QC', headLossRate: 0.26, tailLossRate: 0.34, edgeLossRate: 0.08 },
  { steelGrade: 'SPHC-DD', headLossRate: 0.23, tailLossRate: 0.31, edgeLossRate: 0.5 },
  { steelGrade: 'SPHC-Z', headLossRate: 0.23, tailLossRate: 0.3, edgeLossRate: 0.65 },
  { steelGrade: 'SPHD-HS4', headLossRate: 0.21, tailLossRate: 0.26, edgeLossRate: 0 },
  { steelGrade: 'SPHE-TG1', headLossRate: 0.17, tailLossRate: 0.28, edgeLossRate: 3.42 },
]);

const steelGradeThicknessData = ref<SteelGradeThicknessLoss[]>([
  { steelGrade: 'SPHE-TQC', thicknessGroup: '13:1.45-1.65', headLossRate: 1.67, tailLossRate: 0.63, edgeLossRate: 0.65 },
  { steelGrade: 'SPHE-TQC', thicknessGroup: '7:0.55-0.65', headLossRate: 0.99, tailLossRate: 0.42, edgeLossRate: 0 },
  { steelGrade: 'SPHE-T', thicknessGroup: '12:1.25-1.45', headLossRate: 0.62, tailLossRate: 0.72, edgeLossRate: 0 },
  { steelGrade: 'SPHC-H', thicknessGroup: '4:0.31-0.38', headLossRate: 0.49, tailLossRate: 0.53, edgeLossRate: 0.35 },
  { steelGrade: 'SPHC-BJY', thicknessGroup: '7:0.55-0.65', headLossRate: 0.48, tailLossRate: 0.42, edgeLossRate: 0.33 },
  { steelGrade: 'SPHE', thicknessGroup: '4:0.31-0.38', headLossRate: 0.48, tailLossRate: 0.49, edgeLossRate: 0.68 },
  { steelGrade: 'SPHE', thicknessGroup: '6:0.46-0.55', headLossRate: 0.47, tailLossRate: 0.49, edgeLossRate: 0.99 },
  { steelGrade: 'SPHE-T', thicknessGroup: '15:1.85-2.05', headLossRate: 0.46, tailLossRate: 0.51, edgeLossRate: 0.26 },
  { steelGrade: 'SPHE', thicknessGroup: '9:0.75-0.85', headLossRate: 0.42, tailLossRate: 0.43, edgeLossRate: 0.55 },
  { steelGrade: 'SPHC-LT', thicknessGroup: '16:2.05-2.5', headLossRate: 0.42, tailLossRate: 0.54, edgeLossRate: 0.56 },
  { steelGrade: 'SPHC-BJY', thicknessGroup: '15:1.85-2.05', headLossRate: 0.41, tailLossRate: 0.49, edgeLossRate: 0.58 },
  { steelGrade: 'SPHE-T', thicknessGroup: '11:1.05-1.25', headLossRate: 0.4, tailLossRate: 0.39, edgeLossRate: 0 },
  { steelGrade: 'SPHE-T', thicknessGroup: '8:0.65-0.75', headLossRate: 0.4, tailLossRate: 0.51, edgeLossRate: 0.35 },
  { steelGrade: 'SPHE', thicknessGroup: '8:0.65-0.75', headLossRate: 0.39, tailLossRate: 0.47, edgeLossRate: 0.17 },
  { steelGrade: 'SPHC-Z', thicknessGroup: '5:0.38-0.46', headLossRate: 0.39, tailLossRate: 0.36, edgeLossRate: 0.62 },
  { steelGrade: 'SPHE-TQC', thicknessGroup: '5:0.38-0.46', headLossRate: 0.39, tailLossRate: 0.44, edgeLossRate: 0 },
  { steelGrade: 'SPHE-H', thicknessGroup: '4:0.31-0.38', headLossRate: 0.39, tailLossRate: 0.5, edgeLossRate: 0.63 },
  { steelGrade: 'SPHE-H', thicknessGroup: '7:0.55-0.65', headLossRate: 0.39, tailLossRate: 0.47, edgeLossRate: 0.47 },
  { steelGrade: 'SPHE', thicknessGroup: '7:0.55-0.65', headLossRate: 0.38, tailLossRate: 0.46, edgeLossRate: 0.29 },
  { steelGrade: 'SPHC-BJY', thicknessGroup: '6:0.46-0.55', headLossRate: 0.38, tailLossRate: 0.4, edgeLossRate: 0.45 },
  { steelGrade: 'SPHE-T', thicknessGroup: '4:0.31-0.38', headLossRate: 0.38, tailLossRate: 0.38, edgeLossRate: 0.81 },
  { steelGrade: 'SPHC-WK', thicknessGroup: '14:1.65-1.85', headLossRate: 0.38, tailLossRate: 0.45, edgeLossRate: 0.51 },
]);

const steelGradeThicknessWidthData = ref<SteelGradeThicknessWidthLoss[]>([
  { steelGrade: 'SPHE-TQC', thicknessGroup: '13:1.45-1.65', widthGroup: '7:1200-1300', headLossRate: 1.67, tailLossRate: 0.63, edgeLossRate: 0.65 },
  { steelGrade: 'SPHE-TQC', thicknessGroup: '7:0.55-0.65', widthGroup: '7:1200-1300', headLossRate: 0.99, tailLossRate: 0.42, edgeLossRate: 0 },
  { steelGrade: 'SPHE-T', thicknessGroup: '12:1.25-1.45', widthGroup: '7:1200-1300', headLossRate: 0.62, tailLossRate: 0.72, edgeLossRate: 0 },
  { steelGrade: 'SPHC-H', thicknessGroup: '4:0.31-0.38', widthGroup: '7:1200-1300', headLossRate: 0.5, tailLossRate: 0.54, edgeLossRate: 0.31 }, // Note: Adjusted values slightly from image for variety where needed
  { steelGrade: 'SPHE', thicknessGroup: '8:0.46-0.55', widthGroup: '7:1200-1300', headLossRate: 0.5, tailLossRate: 0.51, edgeLossRate: 0.8 },
  { steelGrade: 'SPHC-BJY', thicknessGroup: '7:0.55-0.65', widthGroup: '7:1200-1300', headLossRate: 0.48, tailLossRate: 0.42, edgeLossRate: 0.33 },
  { steelGrade: 'SPHE', thicknessGroup: '4:0.31-0.38', widthGroup: '7:1200-1300', headLossRate: 0.48, tailLossRate: 0.49, edgeLossRate: 0.69 }, // Adjusted
  { steelGrade: 'SPHE-T', thicknessGroup: '15:1.85-2.05', widthGroup: '7:1200-1300', headLossRate: 0.46, tailLossRate: 0.51, edgeLossRate: 0.26 },
  { steelGrade: 'SPHE-T', thicknessGroup: '5:0.38-0.46', widthGroup: '7:1200-1300', headLossRate: 0.45, tailLossRate: 0.43, edgeLossRate: 0.35 },
  { steelGrade: 'SPHE', thicknessGroup: '4:0.31-0.38', widthGroup: '5:1000-1100', headLossRate: 0.44, tailLossRate: 0.39, edgeLossRate: 0.59 },
  { steelGrade: 'SPHE-T', thicknessGroup: '11:1.05-1.25', widthGroup: '7:1200-1300', headLossRate: 0.44, tailLossRate: 0.5, edgeLossRate: 0 },
  { steelGrade: 'SPHE-T', thicknessGroup: '4:0.31-0.38', widthGroup: '7:1200-1300', headLossRate: 0.42, tailLossRate: 0.39, edgeLossRate: 0.59 }, // Adjusted
  { steelGrade: 'SPHC-LT', thicknessGroup: '16:2.05-2.5', widthGroup: '7:1200-1300', headLossRate: 0.42, tailLossRate: 0.54, edgeLossRate: 0.56 },
  { steelGrade: 'SPHC-Z', thicknessGroup: '5:0.38-0.46', widthGroup: '7:1200-1300', headLossRate: 0.42, tailLossRate: 0.36, edgeLossRate: 0.69 }, // Adjusted
  { steelGrade: 'SPHE', thicknessGroup: '9:0.75-0.85', widthGroup: '5:1000-1100', headLossRate: 0.42, tailLossRate: 0.36, edgeLossRate: 1.08 },
  { steelGrade: 'SPHE-TQC', thicknessGroup: '5:0.38-0.46', widthGroup: '5:1000-1100', headLossRate: 0.41, tailLossRate: 0.44, edgeLossRate: 0 },
  { steelGrade: 'SPHE', thicknessGroup: '9:0.75-0.85', widthGroup: '7:1200-1300', headLossRate: 0.41, tailLossRate: 0.48, edgeLossRate: 0.17 },
  { steelGrade: 'SPHC-BJY', thicknessGroup: '15:1.85-2.05', widthGroup: '7:1200-1300', headLossRate: 0.41, tailLossRate: 0.49, edgeLossRate: 0.58 },
  { steelGrade: 'SPHE-T', thicknessGroup: '8:0.65-0.75', widthGroup: '7:1200-1300', headLossRate: 0.4, tailLossRate: 0.51, edgeLossRate: 0.35 },
  { steelGrade: 'SPHE', thicknessGroup: '10:0.85-1.05', widthGroup: '5:1000-1100', headLossRate: 0.39, tailLossRate: 0.4, edgeLossRate: 1.19 }, // Adjusted
  { steelGrade: 'SPHE-T', thicknessGroup: '10:0.85-1.05', widthGroup: '7:1200-1300', headLossRate: 0.39, tailLossRate: 0.4, edgeLossRate: 0.17 }, // Adjusted
  { steelGrade: 'SPHE', thicknessGroup: '8:0.65-0.75', widthGroup: '7:1200-1300', headLossRate: 0.39, tailLossRate: 0.47, edgeLossRate: 0.17 },
]);

// --- Handlers --- 
const handleSearch = () => {
  console.log('查询参数:', searchParams);
  // Add search logic here
};

</script>

<style scoped>
.losses-optimization-container {
  background-color: #0a1a3a;
  color: #c0c4cc;
  padding: 15px;
  height: 100%; 
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header Panel */
.header-panel {
  background-color: #1c2d5a; /* Slightly lighter background */
  padding: 0 15px; /* Remove top/bottom padding */
  border-radius: 3px;
  margin-bottom: 15px;
  flex-shrink: 0;
}

/* Custom Tabs */
:deep(.custom-tabs .el-tabs__header) { margin: 0 0 10px 0; }
:deep(.custom-tabs .el-tabs__nav-wrap::after) { background-color: #3a5a8a; height: 1px; }
:deep(.custom-tabs .el-tabs__item) { color: #c0c4cc; font-size: 14px; height: 35px; line-height: 35px; padding: 0 15px; }
:deep(.custom-tabs .el-tabs__item.is-active) { color: #409eff; }
:deep(.custom-tabs .el-tabs__active-bar) { background-color: #409eff; }

.search-bar {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.time-selection {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.time-selection .label {
  margin-right: 8px;
  white-space: nowrap;
  font-size: 12px;
}

:deep(.custom-date-picker.el-date-editor) {
  width: 240px !important; 
  height: 28px;
  background-color: #0a1a3a;
  border: 1px solid #3a5a8a;
  box-shadow: none;
}
:deep(.custom-date-picker .el-range-input), :deep(.custom-date-picker .el-range-separator) { color: #c0c4cc; font-size: 12px; height: 26px; line-height: 26px; }
:deep(.custom-date-picker .el-range-separator) { padding: 0 2px; }
:deep(.custom-date-picker .el-input__icon) { line-height: 28px; color: #c0c4cc; font-size: 12px; }

.btn {
  height: 28px;
  padding: 0 15px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  color: #fff;
}
.query-btn { background-color: #2979ff; }
.query-btn:hover { background-color: #5393ff; }

/* Content Panel */
.content-panel {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  gap: 15px;
  overflow: hidden; /* Prevent overall panel scroll */
}

.content-placeholder {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #5a7aa4;
   background-color: #1c2d5a;
   border-radius: 3px;
}

.table-section {
  flex: 1; /* Equal width for tables */
  min-width: 0; /* Allow shrinking */
  background-color: #1c2d5a;
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Important for table height */
}

.table-header {
  padding: 8px 15px;
  background-color: rgba(41, 121, 255, 0.1);
  border-bottom: 1px solid #3a5a8a;
  text-align: center;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

/* Deep table styles */
:deep(.el-table) {
  background-color: transparent;
  --el-table-border-color: #3a5a8a;
  --el-table-header-bg-color: #2a5caa; 
  --el-table-header-text-color: #fff;
  --el-table-tr-bg-color: #0f2142;
  --el-table-row-hover-bg-color: #183153;
  --el-table-text-color: #c0c4cc;
  --el-table-border: none; /* Remove outer border if using wrapper border */
}

:deep(.el-table th.el-table__cell),
:deep(.el-table--small th.el-table__cell) { 
  background-color: var(--el-table-header-bg-color) !important;
  color: var(--el-table-header-text-color);
  padding: 4px 8px !important;
  font-weight: normal;
  text-align: center;
  border-color: #3a5a8a !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table--small td.el-table__cell) {
  padding: 4px 8px !important;
  text-align: center;
  border-color: #3a5a8a !important;
  color: var(--el-table-text-color);
  background-color: var(--el-table-tr-bg-color) !important;
}

/* Ensure borders between cells */
:deep(.el-table--border .el-table__cell) {
   border-right: 1px solid #3a5a8a;
}
:deep(.el-table--border th.el-table__cell) {
   border-bottom: 1px solid #3a5a8a;
}


:deep(.el-table__body-wrapper) { 
   scrollbar-width: thin;
   scrollbar-color: #3a5a8a #142a52; 
}
:deep(.el-table__body-wrapper::-webkit-scrollbar) { width: 6px; height: 6px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) { background: #142a52; border-radius: 3px; }
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) { background-color: #3a5a8a; border-radius: 3px; }


</style>
